<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>龙魂抽奖系统</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: 'Microsoft YaHei', sans-serif;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
      }

      .container {
        max-width: 800px;
        width: 100%;
        text-align: center;
      }

      .title {
        color: #fff;
        font-size: 2.5rem;
        margin-bottom: 30px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .draw-button {
        background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
        border: none;
        border-radius: 50px;
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        padding: 15px 40px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        margin-bottom: 30px;
      }

      .draw-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
      }

      .draw-button:active {
        transform: translateY(0);
      }

      .result-container {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 20px;
        padding: 30px;
        margin-top: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        display: none;
      }

      .result-title {
        font-size: 1.5rem;
        margin-bottom: 20px;
        color: #333;
      }

      .dragon-souls {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
      }

      .dragon-soul {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        color: white;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
      }

      .dragon-soul:hover {
        transform: scale(1.1);
      }

      .probability-info {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
        padding: 20px;
        margin-top: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .probability-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
        color: #333;
      }

      .probability-list {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 10px;
      }

      .probability-item {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 0.9rem;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .fade-in {
        animation: fadeIn 0.5s ease-out;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1 class="title">🐉 龙魂抽奖系统 🐉</h1>

      <button class="draw-button" onclick="drawDragonSouls()">🎲 抽取龙魂 🎲</button>

      <div class="probability-info">
        <h3 class="probability-title">抽奖概率</h3>
        <div class="probability-list">
          <div class="probability-item">S级: 1%</div>
          <div class="probability-item">A级: 9%</div>
          <div class="probability-item">B级: 30%</div>
          <div class="probability-item">C级: 60%</div>
        </div>
      </div>

      <div id="resultContainer" class="result-container">
        <h2 class="result-title">🎉 抽奖结果 🎉</h2>
        <div id="dragonSouls" class="dragon-souls"></div>
      </div>
    </div>

    <script>
      // 龙魂颜色配置
      const colors = {
        赤: '#ff4757',
        橙: '#ffa502',
        黄: '#ffdd59',
        绿: '#2ed573',
        青: '#1e90ff',
        蓝: '#3742fa',
        紫: '#a55eea'
      }

      // 阶级配置
      const tiers = {
        S: { count: 5, probability: 0.01 },
        A: { count: 4, probability: 0.09 },
        B: { count: 3, probability: 0.3 },
        C: { count: 2, probability: 0.6 }
      }

      // 获取随机颜色
      function getRandomColor() {
        const colorNames = Object.keys(colors)
        const randomIndex = Math.floor(Math.random() * colorNames.length)
        return {
          name: colorNames[randomIndex],
          hex: colors[colorNames[randomIndex]]
        }
      }

      // 根据概率获取随机阶级
      function getRandomTier() {
        const random = Math.random()
        let cumulativeProbability = 0

        for (const [tier, config] of Object.entries(tiers)) {
          cumulativeProbability += config.probability
          if (random <= cumulativeProbability) {
            return tier
          }
        }

        // 默认返回C级（理论上不会执行到这里）
        return 'C'
      }

      // 生成龙魂
      function generateDragonSouls(tier) {
        const count = tiers[tier].count
        const dragonSouls = []

        for (let i = 0; i < count; i++) {
          const color = getRandomColor()
          dragonSouls.push({
            tier: tier,
            color: color.name,
            hex: color.hex
          })
        }

        return dragonSouls
      }

      // 渲染龙魂到页面
      function renderDragonSouls(dragonSouls, tier) {
        const container = document.getElementById('resultContainer')
        const dragonSoulsDiv = document.getElementById('dragonSouls')

        // 清空之前的内容
        dragonSoulsDiv.innerHTML = ''

        // 添加阶级信息
        const tierInfo = document.createElement('div')
        tierInfo.style.cssText = `
                width: 100%;
                text-align: center;
                font-size: 1.3rem;
                font-weight: bold;
                margin-bottom: 20px;
                color: #333;
            `
        tierInfo.textContent = `恭喜获得 ${tier} 级龙魂！`
        dragonSoulsDiv.appendChild(tierInfo)

        // 渲染每个龙魂
        dragonSouls.forEach((soul, index) => {
          const soulElement = document.createElement('div')
          soulElement.className = 'dragon-soul fade-in'
          soulElement.style.backgroundColor = soul.hex
          soulElement.style.animationDelay = `${index * 0.1}s`
          soulElement.innerHTML = `
                    <div style="text-align: center;">
                        <div style="font-size: 1.2rem;">${soul.color}</div>
                        <div style="font-size: 0.8rem; margin-top: 5px;">${soul.tier}</div>
                    </div>
                `
          dragonSoulsDiv.appendChild(soulElement)
        })

        // 显示结果容器
        container.style.display = 'block'
        container.scrollIntoView({ behavior: 'smooth' })
      }

      // 抽奖主函数
      function drawDragonSouls() {
        // 添加按钮点击效果
        const button = document.querySelector('.draw-button')
        button.style.transform = 'scale(0.95)'
        setTimeout(() => {
          button.style.transform = 'scale(1)'
        }, 150)

        // 获取随机阶级
        const tier = getRandomTier()

        // 生成龙魂
        const dragonSouls = generateDragonSouls(tier)

        // 渲染到页面
        renderDragonSouls(dragonSouls, tier)

        // 控制台输出详细信息
        console.log(`抽奖结果: ${tier}级龙魂`)
        console.log('龙魂详情:', dragonSouls)
      }

      // 页面加载完成后的初始化
      document.addEventListener('DOMContentLoaded', function () {
        console.log('龙魂抽奖系统已加载完成！')
        console.log('点击按钮开始抽奖吧！')
      })
    </script>
  </body>
</html>
